<template>
    <div class="new_product">
        <hr style="opacity: 0.3;" />
        <div class="new_head">
            <div class="head">
                <div style="margin-left: 50px;">
                    <div style="height: 25px;width:140px;font-size: 14px;color: #757575;margin-top: 10px">
                        <a href="registered.vue" style="text-decoration:none" >主页 </a>
                      | <a href="Login.vue"style="text-decoration:none">系列 </a>|
                      {{title }}
                    </div>
                </div>
            </div>

        </div>
        <hr style="opacity: 0.3;margin-top: -15px;" />
        <div class="listGoods">
            <div style="background-color: #fafafa;width: 290px;height: 340px; float: left;margin: 4px" v-for="piu in productList">
               <img :src="piu.img_url" class="image" width="290" height="290" @click="goDetail(piu)">
                <div style="font-size: 12px;margin-left:10px;"><span style="font-weight: bold">{{piu.goods_name}}</span>{{piu.details}}</div>
                <div style="font-size: 12px;margin-left:10px;margin-top: 5px;font-weight: bold">￥{{piu.pice}}</div>
            </div>
        </div>
<!--  分页    -->
      <div class="block">
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[8, 12, 16, 20]"
            :page-size="size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
      </div>
    </div>
</template>

<script>
import {NewproductGoodsApi,Shop,Product4,Product3,Product2,Product5} from '@/api/hxl_port/import'
export default {
      name: "newProduct",
      data() {
        return {
          title:'',
          productList: [],
          size:8,
          currentPage:1,
          total:0
        }
      },
      watch:{
        "$route.query.title"(){
          this.title = this.$route.query.title;
          this.checkTitle()
        },
      },
      methods: {
        checkTitle(){
          if(this.title=="新品上市"){
            this.shop()
          }else if(this.title=="手镯"){
            this.product()
          }else if(this.title=="项链"){
            this.productList2()
          }else if(this.title=="手表"){
            this.productList3()
          }else if(this.title=="首饰"){
            this.productList4()
          }else{
            this.productList5()
          }
        },
        goDetail(row) {
          this.$router.push({
            path: '/detail',
            name: 'detail',
            query: {dialogInfo: JSON.stringify(row)}
          });
        },
        //    分页方法
        handleSizeChange(val) {
          this.size = val;
          this.currentPage = 1;
          this.checkTitle();
        },
        handleCurrentChange(val) {
          this.currentPage = val;
          this.checkTitle();
        },
        product() {
          NewproductGoodsApi(this.currentPage, this.size).then(res => {
            console.log(res.data.content)
            this.productList = res.data.content;
            this.total = res.data.totalElements
          })
        },
        productList2() {
          Product2(this.currentPage, this.size).then(res => {
            console.log(res.data.content)
            this.productList = res.data.content;
            this.total = res.data.totalElements;
          })
        },
        productList3() {
          Product3(this.currentPage, this.size).then(res => {
            console.log(res.data.content)
            this.productList = res.data.content;
            this.total = res.data.totalElements
          })
        },
        productList4() {
          Product4(this.currentPage, this.size).then(res => {
            console.log(res.data.content)
            this.productList = res.data.content;
            this.total = res.data.totalElements
          })
        },
        productList5() {
          Product5(this.currentPage, this.size).then(res => {
            console.log(res.data.content)
            this.productList = res.data.content;
            this.total = res.data.totalElements
          })
        },
        shop() {
          Shop(this.currentPage, this.size).then(res => {
            console.log(res.data.content)
            this.productList = res.data.content;
            this.total = res.data.totalElements
          })
        },
        getQueryString(name) {
          let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
          let reg_rewrite = new RegExp("(^|/)" + name + "/([^/]*)(/|$)", "i");
          let r = window.location.search.substr(1).match(reg);
          let q = window.location.pathname.substr(1).match(reg_rewrite);
          if(r != null){
            return unescape(r[2]);
          }else if(q != null){
            return unescape(q[2]);
          }else{
            return null;
          }},
      },
        created() {
            this.title =  this.$route.query.title;
            this.checkTitle()
        }

}
</script>

<style lang="scss" scoped>
    a:link {color: #757575;} /* 未访问的链接 */
    a:visited {color: #757575;} /* 已访问的链接 */
    a:hover{color: #CCCCCC;} /* 鼠标在链接上 */
    a:active {color: #CCCCCC;} /* 点击激活链接：在你点击该链接后，页面正在转向新地址的时候，链接显示此颜色 */
    .new_product{
      margin-top: 30px;
      padding: 0;
      text-align: center;
      .block{
        margin: 0 auto;
      }
      .listGoods{
        width:90%;
        margin: auto;
        margin-top: 20px;
        height: 700px;
        overflow: auto;
      }
      .listGoods::-webkit-scrollbar {
        width: 4px;
        scrollbar-arrow-color:red;
      }
        .new_head{
            text-align: center;
            height: 50px;
            width: 100%;

        }
        .head{
            width:1200px;
            height:50px;
            margin: auto;
        }
    }
</style>
